<template>
  <div class="upload">
    <nav-bar></nav-bar>
    <div class="main-page">
      <el-form :model="form" style="padding: 37px 80px 0" >
        <el-form-item label="资源标题：" :label-width="formLabelWidth">
          <el-input v-model="form.title" auto-complete="off" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="资源类型：" :label-width="formLabelWidth">
          <el-select
            v-model="typeValue"
            placeholder="请选择资源类型"
            @change="handleTypeChange"
            style="width:620px;"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源版本：" :label-width="formLabelWidth">
          <div class="xyd-container">
            <div class="xyd-c-title" style="line-height:40px;">资源版本列表</div>
            <div class="xyd-c-content">
              <div v-if="sideCategory && sideCategory.length === 0" style="padding-left:10px;">暂无数据</div>
              <div style="height:300px;overflow:scroll">
                <el-tree
                  v-if="sideCategory && sideCategory.length !== 0"
                  :data="sideCategory"
                  :highlight-current="true"
                  :load="loadNode"
                  :props="props"
                  lazy>
                </el-tree>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="资源简介：" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.intro" placeholder="请输入你的描述"></el-input>
        </el-form-item>
        <el-form-item label="作者：" :label-width="formLabelWidth">
          <el-input v-model="form.author" auto-complete="off" placeholder="请输入作者姓名"></el-input>
        </el-form-item>
        <el-form-item label="语点类型：" :label-width="formLabelWidth">
          <el-select
            v-model="yd_type"
            placeholder="请选择语点类型"
            @change="handleYDTypeChange"
            style="width:620px;"
          >
            <el-option
              v-for="item,i in yd_types"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="语点金额：" :label-width="formLabelWidth" v-if="yd_type !== -1">
          <el-input-number v-model="num1" @change="handleChange"></el-input-number>
          <span style="font-size:20px;vertical-align:middle;"> x 3 = <span style="color:#f00;">{{num1 * 3}}</span></span>
          <span style="color:#999;font-size:12px;vertical-align:middle;margin-left:20px;">语点金额需要是3的倍数</span>
        </el-form-item>
        <el-form-item label="现金金额：" :label-width="formLabelWidth" v-if="yd_type !== -1">
          <span>{{num1 * 3}}</span>
        </el-form-item>
        <el-form-item label="上传文件：" :label-width="formLabelWidth">
          <el-button @click="handleUpload">上传文件</el-button>
          <span>{{filename}}</span>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" style="width:620px;" @click="handlePreverse" :loading="loading">保存并上传</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getChild, upload } from 'api/resource'
import pick from 'utils/file/picker'

export default {
  name: 'upload',
  components: {
    NavBar
  },
  data() {
    return {
      formLabelWidth: '120px',
      typeOptions: [],
      typeValue: '',
      sideCategory: [],
      category: [],
      yd_types: [
        { label: '免费', value: -1 },
        { label: '普通', value: 0 },
        { label: '钻石', value: 1 }
      ],
      num1: 1,
      catid: '',
      loading: false,
      form: {
        title: '',
        author: '',
        yd_type: '',
        yd_price: ''
      },
      yd_type: '',
      filename: '',
      props: {
        label: 'name',
        children: 'child'
      }
    };
  },
  created() {
    this.$store.dispatch('GetTops')
    .then(res => {
      this.typeOptions = res
    })
    .catch(err => {
      console.log(err)
    })
  },
  methods: {
    // 弹框，类型选择
    handleTypeChange(id) {
      this.category_id = id
      if (id === 'test') {
        console.log('试卷')
        return false
      }
      if (id === 'paper') {
        console.log('论文')
        return false
      }
      if (id === 'teach-child') {
        console.log('教子有方')
        return false
      }
      getChild({
        catid: id
      })
      .then(res => {
        this.sideCategory = res.data
      })
      .catch(err => console.log(err))
    },
    // 子级筛选获取下一级
    loadNode(node, resolve) {
      // node.level === 0时，下面的语句将为undefind
      // this.task_type_id = node.data.id
      if (node.level === 0) {
        return resolve(this.sideCategory)
      } else {
        this.category_id = node.data.id
        getChild({
          catid: node.data.id
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => console.log(err))
      }
    },
    // 上传文件
    handleUpload() {
      pick()
      .then(file => {
        console.log(file)
        this.file = file
        this.filename = file.name
      })
      .catch(err => console.log(err))
    },
    // 下一步
    goNext() {
      if (!this.form.title) {
        this.$message({
          message: '请填写标题',
          type: 'warning'
        })
        return false
      } else if (!this.task_type_id) {
        this.$message({
          message: '请选择资源分类',
          type: 'warning'
        })
        return false
      } else if (!this.form.price) {
        this.$message({
          message: '请填写悬赏金额',
          type: 'warning'
        })
        return false
      } else {
        this.progress = 1
      }
    },
    handleYDTypeChange(yt) {
      console.log(yt)
      if (yt === -1) {
        this.num1 = 0
      } else {
        this.num1 = 1
      }
    },
    handleChange(num) {
      console.log(num)
      if (num <= 0) {
        this.yd_type = -1
        this.num1 = 0
      }
    },
    handlePreverse(e) {
      // "category_id": "string",
      // "title": "string",
      // "intro": "string",
      // "author": "string",
      // "resource": "string",
      // "yd_type": "string",
      // "yd_price": "string",
      // "cash": "string"
      e.preventDefault()
      this.loading = true
      upload({
        category_id: this.category_id,
        ...this.form,
        resource: this.file,
        yd_type: this.yd_type === -1 ? 0 : this.yd_type,
        yd_price: this.num1 * 3,
        cash: this.num1 * 3
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.$message({
          message: '上传成功',
          type: 'success',
          onClose() {
            location.reload()
          }
        })
      })
      .catch(err => {
        console.log(err)
        this.loading = false
        this.$message({
          message: '上传失败',
          type: 'error'
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.upload{
  .main-page{
    width: 900px;
    margin: 0 auto;
  }
}
</style>